<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vudio Demo</title>
    <style>
    html,body{
        box-sizing: border-box;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #51074b;
    }
    body{
    }
    .container{
        position: relative;
        width: 100%;
        height: 100%;
    }
    #canvas{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .controller{
        position: absolute;
        z-index: 5;
        bottom: 30px;
        left: 0;
        width: 100%;
        height: 40px;
        text-align: center;
    }
    .controller div{
        display: inline-block;
        height: 40px;
        margin: 0 10px;
    }
    .controller button{
        display: block;
        float: left;
        height: 40px;
        margin: 0 1px;
        padding: 0 20px;
        color: #fff;
        background-color: rgba(255,255,255,.2);
        border: none;
        outline: none;
    }
    .controller button:hover{
        opacity: .6;
    }
    .color-1{
        background-image: linear-gradient(#f00 0%, #f00 30%, #f90 30%, #f90 70%, #ff0 70%, #ff0 100%);
    }
    button.color-2{
        background-color: #ff0;
    }
    .color-3{
        background-image: linear-gradient(#00f, #06f, #09f, #0ff);
    }
    .color-4{
        background-image: linear-gradient(#fb6d6b, #c10056, #a50053, #51074b);
    }
    .color-5{
        background-image: linear-gradient(#ff422d 0%, #ff422d 50%, #6072ff 50%, #6072ff 100%);
    }
    </style>
</head>
<body>
    <div class="container">
        <canvas id="canvas"></canvas>
        <audio id="audio" src="./demo_src/Happy Corporate Ukulele &amp; Whistle.mp3"></audio>
    </div>
    <div class="controller">
        <div>
            <button onclick="audio.play()">播放音乐</button>
            <button onclick="audio.pause()">暂停音乐</button>
        </div>
        <div>
            <button onclick="vudio.dance()">播放效果</button>
            <button onclick="vudio.pause()">暂停效果</button>
            <button onclick="prettifyWaveform()">美化效果</button>
        </div>
        <div>
            <button class="color color-1" onclick="changeColor(0)"></button>
            <button class="color color-2" onclick="changeColor(1)"></button>
            <button class="color color-3" onclick="changeColor(2)"></button>
            <button class="color color-4" onclick="changeColor(3)"></button>
            <button class="color color-5" onclick="changeColor(4)"></button>
        </div>
        <div>
            <button class="pos-v" onclick="changePosV('top')">上</button>
            <button class="pos-v" onclick="changePosV('middle')">中</button>
            <button class="pos-v" onclick="changePosV('bottom')">下</button>
        </div>
        <div>
            <button class="pos-h" onclick="changePosH('left')">左</button>
            <button class="pos-h" onclick="changePosH('center')">中</button>
            <button class="pos-h" onclick="changePosH('right')">右</button>
        </div>
    </div>
    <script src="./vudio.js"></script>
    <script>
    var colors = [
        [
            [0, '#f00'],
            [0.3, '#f00'],
            [0.3, '#f90'],
            [0.7, '#f90'],
            [0.7, '#ff0'],
            [1, '#ff0']
        ],
        '#ff0',
        ['#00f', '#06f',' #09f', '#0ff'],
        ['#fb6d6b', '#c10056',' #a50053', '#51074b'],
        [
            [0, '#ff422d'],
            [0.5, '#ff422d'],
            [0.5, '#6072ff'],
            [1, '#6072ff']
        ]
    ];
    var prettify = false;
    var canvas = $('#canvas');
    var audio = $('#audio');
    var vudio = new Vudio(audio, canvas, {
        effect: 'waveform',
        accuracy: 256,
        width: 1024,
        height: 600,
        waveform: {
            maxHeight : 100,
            color: [
                [0, '#f00'],
                [0.3, '#f00'],
                [0.3, '#f90'],
                [0.7, '#f90'],
                [0.7, '#ff0'],
                [1, '#ff0']
            ]
        }
    });
    vudio.dance();
    function $(selector) {
        return document.querySelector(selector);
    }
    function changeColor(index) {
        vudio.setOption({
            waveform : {
                color: colors[index]
            }
        });
    }
    function changePosV(type) {
        vudio.setOption({
            waveform : {
                verticalAlign: type,
                fadeSide: true
            }
        });
    }
    function changePosH(type) {
        vudio.setOption({
            waveform : {
                horizontalAlign: type,
                fadeSide: true
            }
        });
    }
    function prettifyWaveform() {
        vudio.setOption({
            waveform : {
                prettify: prettify
            }
        });
        prettify = !prettify;
    }
    </script>
</body>
</html>